<!-- pc后台扫码进入：短信充值页面 -->
<template>
	<view class="myBalance" :style="{ '--bgcolor': vuex_config.themeColor1, '--price': vuex_config.price }">
		<template v-if="isInit">
			<view class="myBalance_content">
				<!-- <view class="phone_money flex_c_sb mar_b60">
					<view class="phone_money_text"><input class="ipt" type="text" v-model="rechargeVal" placeholder="手动输入充值金额" /></view>
					<view :class="['money_cz', rechargeVal > 0 ? '' : 'money_disabled']" @click="tapRecharge">充值</view>
				</view>
				 -->
				<view class="rechar_box">
					<view
						:class="{ money_nb: true, flex_c_c: true, moey_color: rechargeCurrent == index ? true : false }"
						v-for="(item, index) in rechargeList" :key="index" @click="tapClick(index, item.amount)"
						style="display: flex;flex-direction: column;">
						<view class="u-line-1 u-font-28">{{ item.amount }}元</view>
						<view class="u-line-1 u-font-28 u-m-t-10">{{item.name}}</view>
					</view>
					<view class="play" @click="onPlaySMSR">充值</view>
					<view class="tip">
						<text>温馨提示：</text>
						<text class="u-m-b-10">1、套餐一（￥90元）：1000条短信，0.09元/条。</text>
						<text class="u-m-b-10">2、套餐二（￥600元）：1万条短信，0.06元/条。</text>
						<text class="u-m-b-10">3、套餐三（￥2100元）：5万条短信，0.042元/条。</text>
						<text class="u-m-b-10">4、套餐四（￥3500元）：10万条短信，0.035元/条。</text>
						<text>5、使用方式：通过调用短信发送API，将指定短信内容发送给指定手机用户，用户收到的短信来自106开头的号码，短信内容多用于商家用户传递验证码、系统通知、会员服务等信息。</text>
					</view>
				</view>
			</view>

			<u-modal v-model="show" title="余额充值" @confirm="sumit" @cancel="cancel" :show-cancel-button="true">
				<view class="" style="margin: 20rpx 0; text-align: center;">
					是否充值{{ !changeRechargeVal ? rechargeVal : changeRechargeVal }}元</view>
			</u-modal>
		</template>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	import {
		wxPay
	} from '@/utils/weixinPay';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		payOrder
	} from '@/mixins/payOrder';
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		balance
	} from '@/mixins/balance.js';
	export default {
		mixins: [pagingMixin, payOrder, balance, wxConfig],
		data() {
			return {
				isInit: false,
				business_id: 0,
				rechargeVal: '', //输入的金额
				changeRechargeVal: 0, // 点击充值金额
				rechargeCurrent: -1, //当前充值选择的下标
				rechargeList: [
					//当前循环的充值价格
					{
						amount: '90',
						name: '0.09元/条',
						num: 1000,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '600',
						name: '0.06元/条',
						num: 10000,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '2100',
						name: '0.042元/条',
						num: 50000,
						donation_amount: 0, // 赠送金额
						integral: 0
					},
					{
						amount: '3500',
						name: '0.035元/条',
						num: 100000,
						donation_amount: 0, // 赠送金额
						integral: 0
					},

				],
				show: false,
				dataList: [] //消费信息列表
			};
		},
		filters: {
			formTime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		computed: {
			...mapState(['vuex_count'])
		},
		onLoad(option) {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
			// #endif
			if (option.busId) {
				this.business_id = option.busId
			}
			this.init();
		},
		methods: {
			...mapActions(['loadUserCount']),
			init() {
				this.$login('init', {}, 'logoFail').then(() => {
					this.isInit = true;
					//消费明细
					// this.$initPage();
					this.loadUserCount();

					// 获取充值信息列表
					// this.$resPost('GetRechargeList').then(({ data }) => {
					// 	if (data.length > 0) {
					// 		this.rechargeList = data;
					// 	}
					// });
				}).catch(err => {
					// console.log(err)
				})
			},
			logoFail() {
				uni.navigateBack({
					delta: 1,
					fail: () => {
						this.$linkTo('index');
					}
				});
			},
			// $initPage() {
			// 	this._init_data('GetUsersConsume', { status: 1 });
			// },
			//点击获取选择金额 参数一:下标,参数二:选择的金额
			tapClick(idx, number) {
				this.rechargeCurrent = idx;
				this.changeRechargeVal = number;
			},

			onPlaySMSR() {
				if (this.rechargeCurrent < 0) {
					this.$toast('请选择套餐')
					return
				}
				this.show = true;
			},
			// 输入框点击充值
			tapRecharge() {
				let reg = /^((0\.[0-9]{1,2})|(([1-9]+[0-9]*)(\.[0-9]{1,2})?))$/;
				if (reg.test(this.rechargeVal) && this.rechargeVal >= 200) {
					this.show = true;
				} else {
					this.$toast({
						title: '请输入最多两位小数的金额,且金额大于200'
					});
				}
			},
			sumit() {
				// let actualprice = Number(this.changeRechargeVal) > 0 ? Number(this.changeRechargeVal) + Number(this.rechargeList[this.rechargeCurrent].donation_amount) : this.rechargeVal;
				let amount = Number(this.changeRechargeVal || this.rechargeVal);
				let {
					rechargeList,
					rechargeCurrent
				} = this
				this.$loading();
				this.addSMSOnlineRecharge({
						amount,
						num: rechargeList[rechargeCurrent].num
					})
					.then((res) => {
						this.$hide();
						this.init();
						let params = {
							orderNo: res.orderNo,
							amount: res.amount
						}
						params = JSON.stringify(params)
						this.$to(`/package/user/SMSRecharge/succeeded/index?params=${params}`)
					})
					.catch((err) => {
						console.log(err)
						this.$toast('支付失败');
						this.init();
					});
			},
			cancel() {
				this.show = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.myBalance {
		width: 100%;
		height: 100%;
	}

	.play {

		width: 600rpx;
		height: 80rpx;
		margin: 20rpx auto 0;
		background-color: #00A6F8;
		color: #ffffff;
		border-radius: 11rpx;
		text-align: center;
		line-height: 80rpx;

	}

	.myBalance_ed {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 320rpx;
		background: var(--bgcolor);
		color: #fff;
	}

	.myBalance_ed .myBalance_text1 {
		margin-top: 80rpx;
		font-size: 26rpx;
		margin-bottom: 27rpx;
		display: block;
	}

	.myBalance_ed .myBalance_text2 {
		font-size: 90rpx;
		font-weight: 700;
	}

	.flex_c_sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rechar_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.money_nb {
			width: 48%;
			box-sizing: border-box;
			height: 150rpx;
			border: 1rpx solid #cccccc;
			border-radius: 8rpx;
			color: #cccccc;
			padding: 0 10rpx;
			// margin: 20rpx 10rpx 0;
			margin-bottom: 26rpx;

			&.flex_c_c {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&.moey_color {
				border: 1px solid var(--bgcolor);
				color: var(--bgcolor);
			}
		}
	}

	.tip {
		padding-top: 200rpx;
		display: flex;
		flex-direction: column;
		color: #999;
	}

	.phone_money_text {
		display: flex;
		align-items: center;
		width: 250px;
		height: 35px;
		background: #f5f5f5;
		border-radius: 4px;
	}

	.phone_money_text input {
		padding-left: 20rpx;
	}

	.myBalance_content {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.money_cz {
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		width: 160rpx;
		height: 70rpx;
		background: var(--bgcolor);
		border-radius: 8rpx;

		&.money_disabled {
			background-color: #ddd;
		}
	}

	.mar_b60 {
		margin-bottom: 60rpx;
	}

	.money_details .details_item:first-child {
		margin-top: 39rpx;
	}

	.money_details {
		.details_list {
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #dddddd;
		}
	}

	.details_item {
		padding: 20rpx 0;

		.color_ccc {
			color: #ccc;
		}

		.details_cont {
			margin-bottom: 5rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text1 {
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}

			.text2 {
				color: var(--price);
			}

			.text3 {
				font-size: 24rpx;
			}

			.text {
				font-size: 28rpx;
			}
		}
	}

	.ipt {
		width: 100%;
		padding-right: 20rpx;
	}

	.ipt .uni-input-placeholder {
		font-size: 26rpx;
		color: #999999;
	}
</style>
